import React, {Component} from 'react';
import Film from "./component/Film";
import Cinema from "./component/Cinema";
import Center from "./component/Center";
import Tabbar from "./component/Tabbar";
import Navbar from "./component/Navbar";

class App extends Component {

    state = {
        list: [{
            id: 1, name: "电影",
        }, {
            id: 2, name: "影院",
        }, {
            id: 3, name: "我的",
        }],
        currentIndex: 0
    }

    showContext() {
        switch (this.state.currentIndex) {
            case 0:
                return <Film/>
            case 1:
                return <Cinema/>
            case 2:
                return <Center/>
            default:
                return null
        }
    }

    render() {
        return (<div>
            <Navbar changeIndex={() => this.setState({currentIndex: 2})}/>
            {this.showContext()}
            <Tabbar list={this.state.list}
                    currentIndex={this.state.currentIndex}
                    changeIndex={index => this.setState({currentIndex: index})}
            />
        </div>);
    }
}

export default App;